<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏弹幕效果示例</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #danmu-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 防止弹幕阻挡鼠标事件 */
  }

  .danmu {
    position: absolute;
    white-space: nowrap;
    text-align: center;
    color: #fff; /* 字体颜色统一设置为白色 */
    font-size: 16px; /* 字体大小统一设置为16px */
    font-family: 'Arial', sans-serif; /* 字体样式统一设置为Arial */
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 50%;
    left: 100%; /* 初始位置在容器右侧外 */
    transform: translateY(-50%);
    will-change: transform; /* 提供性能优化提示 */
    animation: danmu-animation 10s linear forwards; /* 动画持续时间可以根据需要调整 */
  }

  @keyframes danmu-animation {
    from { left: 100%; }
    to { left: -100%; } /* 从右向左移动 */
  }
</style>
</head>
<body>

<div id="danmu-container"></div>

<script>
  const danmuContainer = document.getElementById('danmu-container');
  const danmuTexts = [
   '1. “天下古今之庸人，皆以一‘惰’字致败”。',
'2. 你要根据自身的具体情况去寻找相应的目标，制订相关的计划，最后根据你可掌控的时间去执行，一直努力坚持下去，坚决杜绝瞎忙与无所作为。',
'3. 坚持确实很辛苦，但是想得到成绩都要先付出艰辛的努力。',
'4. 成功 = 不断的坚持 + 正确的方法。任何硬本领的修炼，都必须是理论和实践相结合。只有这样，才能不断地提升自己。',
'5. 我们无法高效学习的第一个原因，是我们不懂得时间的宝贵。',
'6. 当我们年富力强的时候，往往不珍惜时间，等到自己精力和体力都慢慢跟不上的时候，才后知后觉，时间原来如此重要。',
'7. 每一项技能的修炼，最适合学习的的时间，不是已经不可追回的过往，而是当下。所谓 “活到老，学到老”，只要你肯学，那么此刻就是最好的学习时间，马上行动起来吧！',
'8. 高效学习一定要遵循累加法则，每一项新知识，一定要构建在旧知识系统之上。就像盖房子，如果你不把地基打牢，是不可能把房子盖高的。',
'9. 事前经过计划，事后加以反思，如果你已经形成了这样的闭环思维模式，那么，恭喜你，你已经掌握了高效学习的入门法。',
'10. 如果没有目标，你每天只是瞎努力，没有任何实质性的进步与意义；如果没有目标，你每天就算早起了，肯定也不知道自己要做什么；如果没有目标，你就会人云亦云，别人说什么好，你就会跟随别人盲目去做。',
'11. 四象限',
'13. 第一象限，重要且紧急的事。这些事，你需要马上去完成，而且是用自己全部的精力以及力量去完成。',
'14. 第二象限，重要但不紧急的事。修炼硬本领就是这类事，它对你的人生来说非常重要，但是在短时间内，你无法感受到它的紧急性。',
'15. 第三象限，不重要且不紧急的事。比如没有任何目的的朋友聚会，你为之花费了大量的时间，不仅没有任何作用，还影响了第二天的工作和学习，这类事情要尽量避免。',
'16. 第四象限，紧急但不重要的事。比方说取个快递、帮老板买杯咖啡，这些事情很紧急，但是并不重要，往往就是突发事件，你需要在短时间内完成，如果自己腾不出时间，也可以请他人来帮你完成。',
'17. 以学英语为例，虽然在英语的听、说、读、写、译这五大领域都能精通，但这不代表你只要学会听、说、读、写、译就够了，你还要拥有一定的知识底蕴以及文化素养，包括西方的文学、历史和哲学知识等。也就是说，你还要有软实力。这便是高效学习的秘诀四：拓展软实力。',
'18. 一个人不能不学，更不能乱学。方向不对往往适得其反。高效学习这件事，不仅决定着你未来跑得快不快，还决定着你跑得远不远。',
'19. 预习跟复习同等重要，甚至比学习本身更加重要。高效学习的第五个秘诀，就是预习法。',
'20. 我们为什么要预习？有四个字可以回复大家，叫作 “凡事提前”，这属于计划范畴。如何做计划？以早起为例，早起之后的目标，不是起床之后才制定的，而是前一天晚上临睡之前就已经制定好了，你还没有起床，就已经有了要执行的目标，这就是 “凡事提前”。',
'21. 一周始于星期日',
'22. 在哈佛大学商学院，如果你上课之前没有预习，教授会直接把你请出去，因为没预习的话，在课堂讨论中，你不仅无法发言，还听不懂别人在讲什么，自然无法汲取知识的精华，更无法为别人提供有价值的信息。',
'23. 如果你不能把知识内化，学习是毫无意义的。',
'24. 早起有一个前提，是必须早睡，如果你做不到早睡，那么你不适合早起。为什么？因为早起不能以牺牲身体健康为代价。人的精力是非常有限的资源，注意力也是宝贵的资源，在有限的时间内做更多的事，是我们共同的目标。',
'25. 这里的做就是实践。光学是没有用的，一定要实践，知识才能为你所用。学习不是目的，用起来才是。',
'26. 先完成再完善',
'27. 学会的最高标准是会教。',
'28. “教” 是分享的过程，也是输出的过程。',
'29. 物以类聚，人以群分',
'30. 请你记住：重要且紧急的事情要先做，要事优先。- 四象限',
'31. 甘特图的好处有两点：第一，能让你在某一段时间内达到一个均匀忙碌的状态，保持你的稳定性和平衡感；第二，帮助你找到自我实力和自我目标之间的平衡 - 甘特图',
'32. 如果你突然出现超级忙或者超级闲的状态，你就离崩溃不远了，你会失去对计划的掌控感。',
'33. 你在进行多任务管理的时候会发现，有些事情可以如法炮制，并不矛盾。',
'34. 很多人为什么会有 “忙到崩溃” 的时期？其实就是因为你的多线程管理出了问题。你在同一段时间给自己安排太多任务了，且这些任务相互矛盾，目标也不合理。这就是为什么我推荐用一张甘特图去做你的日常计划。',

    // ...更多弹幕
  ];

  let currentIndex = 0;

  function generateDanmu() {
    const danmu = document.createElement('div');
    danmu.className = 'danmu';
    danmu.textContent = danmuTexts[currentIndex];
    
    danmuContainer.appendChild(danmu);
    
    // 等待动画完成后再显示下一条弹幕
    danmu.addEventListener('animationend', () => {
      danmuContainer.removeChild(danmu);
      currentIndex = (currentIndex + 1) % danmuTexts.length; // 循环索引
      if (danmuTexts.length > 0) {
        generateDanmu(); // 立即生成下一条弹幕
      }
    });
  }

  // 立即生成第一条弹幕
  generateDanmu();
</script>

</body>
</html>